﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>不是“PC端 + 移动端”的网站就叫响应式布局_我的网站</title>
    <meta name="keywords" content="响应式布局" />
    <meta name="description" content="响应式布局已经成为现今网站建设方案中的热门术语，随着HTML5技术的发展，它将很快从一种趋势变为常规。但目前，很多客户，甚至互联网从业者，并没有完全认识响应式布局的本质" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="copyright" content="Copyright dedecms51.com 版权所有" />
    
    <link href="/templets/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="/templets/Content/inner.min.css" rel="stylesheet" />
    <!--[if lt IE 9]>
    <script src="/templets/Scripts/html5shiv.min.js"></script>
    <![endif]-->
    <script src="/templets/Scripts/jquery.min.js"></script>
    <script src="/templets/Scripts/bootstrap.min.js"></script>
    <script src="/templets/Scripts/inner.min.js"></script>
</head>

<body>
<header>
    <div class="box">
	    <a href="/" title="织梦网站建设与制作"><img src="/templets/Picture/logo_cases.png" alt="织梦设计出品" /></a>
        <div class="wechat">
    	    <img src="/templets/Picture/wechat_code.jpg" alt="扫描关注网站建设微信公众账号" class="wechat" /><p>扫一扫微信二维码<i></i></p>
        </div>
        <nav>
          <ul>
            <li><a href="/">织梦首页</a></li>
            
            <li><a href="/a/cases/">设计案例</a></li>
            <li class='active'><a href='/a/news/' style='color:white;'>文章动态</a></li>
          </ul>
        </nav>
    </div>
    <footer>
	    高端定制，品牌设计<br /><u>2008 - 2015</u>作品集<br /><a href="http://www.dedecms51.com/" target="_blank">郑州网站建设与制作公司</a>
    </footer>
</header>
    
    <section class="toolbar">
    	<a href="/" title="返回首页" class="homelink"><span class="glyphicon glyphicon-chevron-left"></span></a>
    	<span class="switch glyphicon glyphicon-th-list"></span>
        <div class="btnList">
            <div class="link btn-group">
        	    <a href="/a/news/experience/" class="btn btn-default">文章列表</a>
            </div>
            <div class="link btn-group">
        	    <a href="/a/news/experience/2015/0429/49.html" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left"></span>PREV</a>
            </div>
            <div class="link btn-group">
        	    <a href="/a/news/experience/2015/0429/51.html" class="btn btn-default">NEXT<span class="glyphicon glyphicon-arrow-right"></span></a>
            </div>
        </div>
    </section>
    
    <section class="artshow content">
        <div class="box">
        	<h1>不是“PC端 + 移动端”的网站就叫响应式布局</h1>
            <span class="rel">
            	织梦科技<u>•</u>2015-04-29<u>•</u><a href="/a/news/experience/" target="_blank">经验之谈</a><u>•</u><span class="glyphicon glyphicon-eye-open" title="浏览次数"></span> <script src="/plus/count.php?view=yes&aid=50&mid=1" type='text/javascript' language="javascript"></script>
            </span>
            <div class="words">
                	<p align="center" style="">
		<img border="1" class="img-responsive" src="/uploads/allimg/150429/1T55SP3-0.jpg" style="border: 1px solid rgb(204, 204, 204);" /></p>
	<p>
		&ldquo;响应式布局&rdquo;已经成为现今网站建设方案中的热门术语，随着HTML5技术的发展，它将很快从一种趋势变为常规。但目前，很多客户，甚至互联网从业者，并没有完全认识响应式布局的本质，他们经常被以下误区所迷惑：</p>
	<p>
		<strong>误区一：只要是&ldquo;PC端 + 移动端&rdquo;的网站就是响应式布局</strong></p>
	<p>
		首先，我们要明确一点，采用响应式布局的网站，无论在哪个终端，都是同一个网站，且都通过同一个域名来打开和显示网站内容。它会根据终端屏幕的尺寸，智能调整排版布局，以达到最佳浏览效果。</p>
	<p>
		事 实上，很多网站是通过在PC端和移动端搭建两个不同的网站，并为它们分别绑定两个域名，例如：www.website.com&nbsp;和 mobi.website.com 用于打开PC站和移动站。然后，通过对终端设备的判断，来决定打开哪一个网站更为合适。类似于这种建站方式，我们称之为&ldquo;伪响应式&rdquo;，因为它本质两个不同 的网站而已。</p>
	<p>
		显然，伪响应式的技术含量很低，自然建站成本也低。但它对后期网站的维护和扩展也会产生一定的副作用，因为你需要维护两个甚至更多的网站。不过这并不是不可接受的，在建站预算有限的情况下，这也不失为一个折中的选择。</p>
	<p>
		当然，如果采用响应式布局，不仅可以使网站变得更加轻量，而且，不同终端上统一的设计风格，会给浏览者增添更多的信任感。</p>
	<p>
		<strong>误区二：响应式布局网站，就是移动端的网站</strong></p>
	<p>
		我们早在《响应式布局的设计思路》一文中就提到过，不能一味地认为响应式布局就是专门为移动建站而设计的。的确，响应式布局是在移动互联网诞生之后才出现的，最初的目的也是为了让网站版面对移动端可以表现的更为友好。</p>
	<p>
		但事实上，响应式布局是针对网站的一种制作方案，并不是针对专门的某个终端而设计的。它可以让网站适应任何一个终端，而不是在每个终端上去开发不同的网站。</p>
	<p>
		所以，你可以不必纠结某个响应式网站到底是PC站，还是移动站，只要它能够响应各种终端，为访客带来最好的用户体验，就足够了。当然，你也可以根据用户群的不同，为PC设计一套响应式网站，再为手机设计一套响应式网站，让两个网站都可以完美响应各种终端设备。</p>
	<p>
		<strong>误区三：响应式布局就是做2套网站布局</strong></p>
	<p>
		很多人认为响应式网站就是做一套PC端的布局版式，再做一套移动端的布局版式，有2套布局就算响应式了。实际上这只是最初级的响应式布局，它甚至还不能很好地响应不同终端。</p>
	<p>
		如 果我们要做的更为精细，或许要考虑PC端多种尺寸的屏幕，比如19寸、23寸，或者更大一些的屏幕，是不是要做一些布局微调，或设计出不同的布局方案。移 动端也是一样，我们可以为Pad、手机、iWatch、gGlass等设备，设计不同的布局。甚至还可以考虑横屏和竖屏不同的显示方案。当然，这么做成本 会大很多，但也说明响应式并不仅仅局限于2套网站的布局。</p>
	<p>
		最后，我们来推荐一款响应式布局检测神器，你的网站是不是响应式布局，拿照妖镜来照一照便知！</p>
 
            </div>
            <dl class="tags">
              <dt>文章关键词<span class="glyphicon glyphicon-tag"></span></dt>
              
              <dd><a href="/tags.php?/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80/" target="_blank">响应式布局</a></dd>
              
            </dl>
            <div class="bdsharebuttonbox">
            	<a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
            </div>
        </div>
        <aside>
        	<div class="ad"><a href="/" title="做网站，找织梦" target="_blank"><img src="/templets/Picture/ad.jpg" alt="建网站，找织梦，网站建设品牌设计企业" /></a></div>
            <div class="caption"><h3>推荐阅读</h3></div>
            <ul class="items">
               <li>
                  <a href="/a/news/company/2015/0429/24.html" target="_blank" class="thumb"><img src="/uploads/allimg/150429/1Q30561K-0-lp.jpg" /></a>
                  <span class="title"><a href="/a/news/company/2015/0429/24.html" target="_blank" title="2015羊年大吉，织梦无忧网">2015羊年大吉，织梦无忧网 ...</a></span>
                  <span class="rel">今日<span class="glyphicon glyphicon-eye-open" title="浏览次数"></span>169</span>
                </li>
<li>
                  <a href="/a/news/industry/2015/0429/35.html" target="_blank" class="thumb"><img src="/uploads/allimg/150429/1-1504291TK05R.jpg" /></a>
                  <span class="title"><a href="/a/news/industry/2015/0429/35.html" target="_blank" title="国家发改委推行电子政务">国家发改委推行电子政务 ...</a></span>
                  <span class="rel">37天前<span class="glyphicon glyphicon-eye-open" title="浏览次数"></span>53</span>
                </li>
<li>
                  <a href="/a/news/experience/2015/0429/51.html" target="_blank" class="thumb"><img src="/uploads/allimg/150429/1T6424N4-0-lp.jpg" /></a>
                  <span class="title"><a href="/a/news/experience/2015/0429/51.html" target="_blank" title="钱都砸去哪里了，为什么">钱都砸去哪里了，为什么 ...</a></span>
                  <span class="rel">37天前<span class="glyphicon glyphicon-eye-open" title="浏览次数"></span>164</span>
                </li>
<li>
                  <a href="/a/news/experience/2015/0429/50.html" target="_blank" class="thumb"><img src="/uploads/allimg/150429/1T55SP3-0-lp.jpg" /></a>
                  <span class="title"><a href="/a/news/experience/2015/0429/50.html" target="_blank" title="不是“PC端 + 移动端”的网">不是“PC端 + 移动端”的网 ...</a></span>
                  <span class="rel">37天前<span class="glyphicon glyphicon-eye-open" title="浏览次数"></span>180</span>
                </li>

            </ul>
        </aside>
    </section>
    
    <div class="dock">
        <ul class="icons">
        	<li class="up"><i></i></li>
            <li class="tel">
            	<i></i><p>建站咨询热线<br />150-2021-7966</p>
            </li>
            <li class="im">
            	<i></i><p><a href="http://wpa.qq.com/msgrd?v=3&uin=379144319&site=qq&menu=yes" target="_blank">点我，建站咨询</a></p>
            </li>
        </ul>
    </div>
    
    <script>        
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "//hm.baidu.com/hm.js?a821a161aa4214f5ff5b8ca372960ebb";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();

        window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "不是“PC端 + 移动端”的网站就叫响应式布局", "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "32" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
    </script>
</body>
</html>